<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>视频上传</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.0.1/skins/default/aliplayer-min.css" />
<script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.0.1/aliplayer-min.js"></script>
</head>

<body>
<div class="container">
  <div class="box">
    <div class="imageBox">
      <label class="file">
        <input type="file" id="file" accept="video/3gpp, video/*">
        选择视频</label>
      <div class="vicon hide">
        <i></i>
        <div class="fname"></div>
        <div class="progress">
          <span></span>
        </div>
        <div class="ctrbox">
          <button class="green rechose">重新选择</button>
          <button class="red start">开始上传</button>
          <button class="red pause hide">取消上传</button>
          <div class="tips hide">视频正在上传中，您可以关闭上传弹窗继续其他工作</div>
        </div>
      </div>
      <div class="pbox hide">
        <div class="player">
          <div  class="prism-player" id="J_prismPlayer" style="position: absolute"></div>
        </div>
      </div>
      <div class="loading">
        <i></i>
        <div class="t">视频服务器准备中，请稍候...</div>
      </div>
    </div>
  </div>
  <div class="clear"></div>
</div>
<script src="../jquery-1.11.1.min.js"></script>
<script src="../config.js"></script>
<script src="aliyun-sdk.min.js"></script>
<script src="vod-sdk-upload-1.0.6.min.js"></script>
<script>
	
var getUrlParam=function (name) {
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
	var r = window.location.search.substr(1).match(reg); //匹配目标参数
	if (r != null) return decodeURI(r[2]);
	return null; //返回参数值
}
function videoplay(vid) {
	$(".loading").show();
	$(".file").hide();
	$(".vicon").hide();
	$(".pbox").show();
	var cmp = false;
	var t = setInterval(function(){	
		$.post(site.videoUrl+"/video/getPlayVideoAuth",{videoId:vid},function(e){
			clearInterval(t);
			cmp = true;
			if (!window.parent.$('[prvbox='+pr+']').prev(".videobox").hasClass("active")) {
				window.parent.$('[prvbox='+pr+']').prev(".videobox").removeClass("ing").addClass("active");
				window.parent.$('[prvbox='+pr+']').prev(".videobox").css("background-image","url("+e.result.coverURL+")");;
			}
			if (cmp) {
				$(".loading").hide();	
				var player = new Aliplayer({
					id: 'J_prismPlayer',
					width: '100%',
					height: '480px',
					autoplay: false,
					vid : vid,
					playauth :e.result.playAuth,
					cover: e.result.coverURL,
					//useH5Prism:true
				});
			}
		});
	},1000);
}
var file;
var fileName = "";
var uploadAuth = "";
var uploadAddress = "";
var uploader;
var vid = getUrlParam("v")||"";
var pr = getUrlParam("b");
if (vid != "") {
	videoplay(vid);
}
var userData = '{"Vod":{"UserData":"{"IsShowWaterMark":"false","Priority":"7"}"}}';





$("#file").change(function(e){
	file = e.target.files[0];
	fileName = file.name;
	$(".progress").hide();
	$(".tips").hide();
	$(".file").hide();
	$(".vicon").show();
	$(".vicon").find(".fname").text(fileName);
});
$(".rechose").click(function(){
	$(".vicon").hide();
	$(".file").show();
	$(".file").find("#file").val("").click();
});
$(".start").click(function(){
	window.parent.$('[prvbox='+pr+']').prev(".videobox").addClass("loading");
	$(".progress").show().removeClass("error");
	$(".tips").show();
	$(".rechose").hide();
	$(".start").hide();
	$(".pause").show();
	$.post(site.videoUrl+"/video/getUploadVideoAuth", {"fileName":fileName},function(e) {
		uploadAuth = e.result.uploadAuth;
		uploadAddress = e.result.uploadAddress;
		vid = e.result.videoId;
		uploader.addFile(file, null, null, null, userData);
		uploader.startUpload();
	})
});
$(".pause").click(function(){
	uploader.cancelFile(0);
	uploader.deleteFile(0);
	uploader.cleanList();
	uploader.stopUpload();
	$(".file").show();
	$(".vicon").hide();
	$(".progress").find("span").width(0);
	$(".file").find("#file").val("");
	$(".rechose").show();
	$(".start").show();
	$(".pause").hide();
	$(".minimize").hide();
	window.parent.$('[prvbox='+pr+']').prev(".videobox").removeClass("loading");
	window.parent.$(".btnBox").find(".btn").prop("disabled",false);
});
$(".minimize").click(function(){
	$(this).parents(".cover").hide();
});
window.onload = new function() {
	uploader = new VODUpload({
		// 文件上传失败
		'onUploadFailed': function (uploadInfo, code, message) {
			$(".progress").find("span").text("上传失败");
			$(".progress").addClass("error");
		},
		// 文件上传完成
		'onUploadSucceed': function (uploadInfo) {
			$.post(site.videoUrl+"/video/saveVideo", {"videoId":vid},function(e) {
				console.log(e);
				if(e.code == "rest.success") {
					videoplay(vid);
					window.parent.$('[prvbox='+pr+']').val(e.result).attr("aliid",vid);
					window.parent.$('[prvbox='+pr+']').prev(".videobox").removeClass("loading").addClass("ing");
				}
				else {
					$(".progress").find("span").text("上传失败");
					$(".progress").addClass("error");
				}
				window.parent.$(".btnBox").find(".btn").prop("disabled",false);
			})
			

		},
		// 文件上传进度
		'onUploadProgress': function (uploadInfo, totalSize, uploadedSize) {
			$(".progress").find("span").animate({
				"width":Math.ceil(uploadedSize * 100 / totalSize) + "%"
			},100);
			$(".progress").find("span").text(Math.ceil(uploadedSize * 100 / totalSize) + "%");
			window.parent.$('[prvbox='+pr+']').prev(".videobox").find(".progress").find("span").animate({
				"width":Math.ceil(uploadedSize * 100 / totalSize) + "%"
			},100);
			window.parent.$('[prvbox='+pr+']').prev(".videobox").find(".progress").find("i").text(Math.ceil(uploadedSize * 100 / totalSize) + "%");
		},
		// 开始上传
		'onUploadstarted': function (uploadInfo) {
			//1、调用后台请求获取uploadAuth和uploadAddress
			//2、调用后台请求时传入参数：
			//fileName：视频源文件名称，视频源文件名称
			//title：视频标题
			
			window.parent.$(".btnBox").find(".btn").prop("disabled",true);
			uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress);
		}
	});

	// 点播上传。每次上传都是独立的鉴权，所以初始化时，不需要设置鉴权
	uploader.init();
};
</script>
</body>
</html>
